<template>
  <div :id="pid" v-show="gridInfo !== null" class="grid" :class="{'full': isScreenFull, 'more': gridKeeperInfo?.length > 2}">
    <div class="info" v-if="gridInfo">
      <div class="item">
        <div class="item-row">
          <span class="ll">网格</span>
          <span class="text" :c-tip="gridInfo.gridName" c-tip-class="c-tip-normal" c-tip-auto>{{ gridInfo.gridName }}</span>
        </div>
      </div>
      <div class="item box" :class="{'off-line': item.isLine !== '1'}" v-for="(item, index) in gridLeader" :key="index">
        <div class="item-row">
          <span class="ll">网格长</span>
          <span class="text" :c-tip="gridInfo.keeperName" c-tip-class="c-tip-normal" c-tip-auto>{{ item.keeperName }}</span>
          <span class="status">{{ item.isLine === '1' ? '在线' : '离线' }}</span>
        </div>
        <div class="item-row">
          <span class="ll">手机号</span>
          <span class="text">{{ item.keeperPhoneNumber }}</span>
        </div>
      </div>
      <div class="til">网格员</div>
      <template v-for="(item, index) in gridKeeperInfo">
        <div class="item box" :class="{'off-line': item.isLine !== '1'}" v-if="more || index < 2">
          <div class="item-row">
            <span class="ll">姓名</span>
            <span class="text" :c-tip="gridInfo.keeperName" c-tip-class="c-tip-normal" c-tip-auto>{{ item.keeperName }}</span>
            <span class="status">{{ item.isLine === '1' ? '在线' : '离线' }}</span>
          </div>
          <div class="item-row">
            <span class="ll">手机号</span>
            <span class="text">{{ item.keeperPhoneNumber }}</span>
          </div>
        </div>
      </template>
      <i v-if="gridKeeperInfo && !gridKeeperInfo.length" class="c-no-datas-block">暂无网格员</i>
    </div>
    <i class="iconfont more-btn" :class="more ? 'icon-shang' : 'icon-xia'" @click="more = !more, countHeight()" @dblclick.stop></i>
    <i v-if="gridInfo === false" class="c-no-datas-block">暂无网格</i>
  </div>
</template>
<script>

import { getGrid, getGridKeeper } from '@/api/video/video';

export default {
  // props: ['lng', 'lat'],
  props: {
    lng: { //经度
      type: [String, Number]
    },
    lat: { //纬度
      type: [String, Number]
    },
    isFull: {
      default: false
    },
    vueIns: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      pid: this.getUUID(), //页面唯一id
      isScreenFull: false, //是否全屏
      gridInfo: null, //网格信息
      gridLeader: null, //网格长
      gridKeeperInfo: null, //网格员信息
      more: false, //更多
    }
  },
  mounted() {
    this.checkScreenFull();
    this.resizeObserver  = new ResizeObserver(() => {
      clearTimeout(this.resizeTiming);
      this.resizeTiming = setTimeout(() => {
        this.checkScreenFull();
      }, 200);
    });
    this.resizeObserver.observe($('#'+ this.pid)[0]);
    this.getGrid();
  },
  methods: {
    /**
     * 查询网格
     */
    getGrid() {
      if(!this.lng || !this.lat) {
        this.gridInfo = false;
        return false;
      }
      const params = {
        longitude: this.lng, //摄像机经度
        latitude: this.lat, //摄像机纬度
        tenantList: [{
          tenantId: Object.keys(this.vueIns).length === 0 ? this.$store.getters.userInfo.tenantId : this.vueIns.$store.getters.userInfo.tenantId, //租户id
          industryCode: Object.keys(this.vueIns).length === 0 ? this.$store.getters.userInfo.industryCode : this.vueIns.$store.getters.userInfo.industryCode, //行业编码
        }]
      };
      getGrid(params).then(resp => {
        this.gridInfo = false;
        if(resp.code === 200) {
          if(!resp.data?.length) {
            return false;
          }
          this.gridInfo = resp.data[0];
          this.getGridKeeper();
        }else {
          $message.a(resp);
        }
      });
    },
    /**
     * 查询网格员
     */
    getGridKeeper() {
      const params = {
        gridId: this.gridInfo.gridId
      };
      getGridKeeper(params).then(resp => {
        this.gridLeader = [];
        this.gridKeeperInfo = [];
        if(resp.code === 200) {
          const list = resp.data?.rows || [];
          list.forEach(item => {
            if(item.keeperType === '1') {
              this.gridLeader.push(item);
            }else {
              this.gridKeeperInfo.push(item);
            }
          })
          this.countHeight();
        }else {
          $message.a(resp);
        }
      });
    },
    /**
     * 计算高度
     */
    countHeight() {
      const $grid = $('#'+ this.pid);
      if(this.more) {
        const leaderLen = this.gridLeader.length;
        const keeperLen = this.gridKeeperInfo.length > 5 ? 5 : this.gridKeeperInfo.length;
        const height = parseInt($grid.css('padding-bottom')) + parseInt($grid.find('.item:not(.box)').height()) + 36 + 62 * (leaderLen + keeperLen);
        $grid.css('height', height);
      }else {
        $grid.removeAttr('style');
      }
    },
    /**
     * 校验是否全屏
     */
    checkScreenFull() {
      this.isScreenFull = false;
      if(document.mozFullScreen || document.fullScreen || document.webkitIsFullScreen) {
        this.isScreenFull = true;
      }
      if(document.webkitRequestFullScreen || document.mozRequestFullScreen || document.msFullscreenEnabled) {
        this.isScreenFull = true;
      }
    },
    /**
     * 生成uuid
     */
    getUUID() {
      const crypto = window.crypto || window.msCrypto;
      const array = new Uint32Array(1);
      const r = crypto.getRandomValues(array)[0] ;
      return Date.now() + '2' + r;
    },
  },
  beforeDestroy() {
    if(this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
    clearTimeout(this.resizeTiming);
    this.$emit('closed');
  },
}
</script>
<style scoped lang="scss">
  .grid{
    width: 342px;
    max-width: 50%;
    max-height: calc(100% - 83px);
    background: rgba(0,0,0,0.7);
    border-radius: 8px;
    position: absolute;
    top: 44px;
    right: 12px;
    padding: 9px 12px 12px;
    display: flex;
    flex-direction: column;
    &.full{
      max-height: calc(100% - 123px);
    }
    .info{
      flex: 1;
      width: 100%;
      line-height: 20px;
      color: #fff;
      font-size: 14px;
      overflow: auto;
      .item{
        &-row{
          display: flex;
          .ll{
            width: 2em;
            text-align-last: justify;
            margin-right: 0.9em;
            position: relative;
            &:after{
              content: "：";
              position: absolute;
            }
          }
          .text{
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        &.box{
          background: rgba(0,0,0,0.4);
          border: 1px solid #FFFFFF;
          border-radius: 0;
          margin-top: 9px;
          padding: 9px 6px 9px 12px;
          .item-row{
            margin-top: 6px;
            &:first-child{
              margin-top: 0;
            }
          }
          .ll{
            width: 3em;
            color: rgba(255,255,255,0.7);
          }
          .status{
            width: 40px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: rgba(255,255,255,0.4);
            border-radius: 4px;
            font-size: 12px;
          }
          &.off-line{
            opacity: 0.4;
          }
        }
      }
      .til{
        margin-top: 9px;
      }
    }
    .more-btn{
      display: none;
      width: 20px;
      height: 20px;
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      color: #fff;
    }
    &.more{
      padding-bottom: 22px;
      height: var(--member);
      .more-btn{
        display: block;
      }
    }
    .c-no-datas-block{
      margin: 8px auto;
      &:before {
        background-image: url("~@/assets/image/noData-normal.png");
      }
    }
    ::-webkit-scrollbar-thumb {
      background-color: rgba(255,255,255,0.4) !important;
      &:hover {
        background-color: rgba(255,255,255,0.55) !important;;
      }
    }
    .el-scrollbar__bar {
      .el-scrollbar__thumb{
        background-color: rgba(255,255,255,0.4) !important;;
        &:hover {
          background-color: rgba(255,255,255,0.55) !important;;
        }
      }
    }
  }
</style>
